<template>
  <div ref="line" class="line-container"></div>
</template>

<script>
export default {
  name: 'line-chart',
  props: ['data'],
  watch: {
    data: {
      handler() {
        this.setChart()
      }
    }
  },
  methods: {
    setChart() {
      if (this.data) {
        this.initChart()
      }
    },
    initChart() {
      const options = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: this.data.map(item => item.name)
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: {
          type: 'value'
        },
        series: this.data
      }
      this.$echarts.dispose(this.$refs.line)
      const chart = this.$echarts.init(this.$refs.line)
      window.onresize = chart.resize
      chart.setOption(options)
    }
  }
}
</script>
